<template>
  <fragment>
    <!---->
    <template v-if='(!menu.children||!menu.children.length)'>
      <el-menu-item :key="menu.id" :index="menu.path">
        <i :class='menu.iconClass'/>
        <span id="span_menuName">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
    <!---->
    <template v-else>
      <el-submenu :key="menu.id" :index="menu.path">
        <!---->
        <template slot='title'>
          <i :class='menu.iconClass'/>
        <span id="span_menuName">{{menu.menuName}}</span>
        </template>
        <!---->
        <template v-for='child of menu.children'>
          <NavMenu :key="child.id" :index="child.path" :menu='child'/>
        </template> 
      </el-submenu>
    </template>
  </fragment>
</template>

<script>
export default {
  name: 'NavMenu',
  props: {
    menu: Object,
    default () {
      return {}
    },
  },
  data(){
      return {
          isCollapse: false
      }
  }
  
}
</script>